<template>
  <el-dialog
    class="multilingual-dialog"
    :title="title"
    :visible.sync="visible"
    :width="width"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="multilingual-dialog-container">
      <el-form
        :model="form"
        :rules="rules"
        ref="formRef"
        label-width="120px"
      >
        <el-form-item
          v-for="v in languageList"
          :label="`${v.remark}`"
          :key="v.language"
          :prop="v.language"
        >
          <el-input
            :placeholder="$t('common.placeholder.inputLanguage', { language: v.remark })"
            :disabled="disabled && v.language === 'zh'"
            v-model="form[v.language]"
            style="width: 280px;"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button @click="handleClose">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="handleConfirm">{{$t('common.base.confirm')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { ref, reactive } from 'vue';
import { t } from '@src/locales'

export default {
  name: 'multilingual-dialog',
  props: {
    title: {
      type: String,
      default: '',
    },
    languageList: {
      type: Array,
      default: () => [],
    },
    value: {
      type: Object,
      default: () => ({}),
    },
    width: {
      type: String,
      default: '500px',
    },
    isNeedValidation: {
      type: Boolean,
      default: false,
    },
    // type: {
    //   type: String,
    //   default: 'text',
    //   validator: val => {
    //     return ['text', 'textare'].includes(val);
    //   },
    // },
  },
  emits: ['input'],
  setup(props, { emit }) {
    let visible = ref(false);
    let disabled = ref(false);
    let formRef = ref(null);
    const form = reactive({
      zh: '',
      en: '',
      ja: '',
      ko: '',
    });
    let rules = ref({});

    const updateForm = val => {
      // if (Object.keys(val).length === 0) {
      //   props.languageList.forEach(v => {
      //     state.form[v.language] = '';
      //   });
      // } else {
      //   Object.keys(val).forEach(key => {
      //     state.form[key] = val[key];
      //   });
      //   // state.form = Object.assign({}, val);
      // }
      props.languageList.forEach(v => {
        form[v.language] = val?.[v.language] || '';
      });
    };

    const init = (value, isNeedValidation) => {
      rules.value = {};
      if (props.isNeedValidation || isNeedValidation) {
        props.languageList.forEach(v => {
          rules.value[v.language] = [
            {
              required: true,
              message: t('common.validate.requiredLanguage', { language: v.remark }),
              trigger: 'blur',
            },
            // { max: 20, message: '最多20个字符', trigger: 'change' },
          ];
        });
      }

      updateForm(value);
    };

    const openDialog = (value, isNeedValidation = false) => {
      // console.log('openDialog', value);
      visible.value = true;

      init(value, isNeedValidation);
    };

    const handleConfirm = () => {
      formRef.value.validate(valid => {
        if (valid) {
          emit('update', form);

          formRef.value.resetFields();
          visible.value = false;
        } else {
          console.info('表单校验不通过');
        }
      });
    };

    const handleClose = () => {
      formRef.value.resetFields();
      // updateForm({});
      visible.value = false;
    };

    // watch(
    //   () => props.value,
    //   val => {
    //     updateForm(val);
    //   }
    // );

    return {
      visible,
      disabled,
      form,
      rules,
      formRef,
      openDialog,
      handleConfirm,
      handleClose,
    };
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  display: flex;
  align-items: center;
}

.multilingual-dialog ::v-deep .el-form-item__content {
  margin-left: 20px !important;
  width: 100%;
}
</style>
